<template>
  <div>
    <van-cell :title="title" :value="values" is-link   @click="showPopup"/>
    <van-popup v-model="show" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @cancel="show = false"
          @confirm="onConfirm"
        />
      </van-popup>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    pop: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      show: false,
      values: '请选择'
    }
  },
  computed: {
    columns () {
      return this.pop.map(item => item.label)
    }
  },
  methods: {
    showPopup () {
      this.show = true
    },
    onConfirm (val, index) {
      this.values = val
      this.$emit('setChoice', this.pop[index].value)
      // console.log(val, index)
      // console.log(this.pop[index].value)
      this.show = false
    }
  }
}
</script>

<style lang="less" scoped>

</style>
